<template>
  <div class="shopinfo-container" v-if="data">
    <div class="shop-info" @click="$router.push('/detail')">
      <!-- 左侧 -->
      <div class="shop-info-left">
        <img :src="data.image_path" alt="">
      </div>

      <!-- 右侧 -->
      <div class="shop-info-right">
        <!-- 第一行 -->
        <div class="shop-info-title">
          <i v-if="data.is_premium">品牌</i>
          <span class="title">{{ data.name }}</span>
        </div>

        <!-- 第二行 -->
        <div class="shop-info-star">
          <div>
            <roating :roating="data.rating"></roating>
            <div class="rate">{{ data.rating }}</div>
            <span class="shop-number">月售{{ data.recent_order_num }}单</span>
          </div>
          <span class="send-bird" v-if="data.delivery_mode">{{ data.delivery_mode.text }}</span>
        </div>
        <!-- 第三行 -->
        <div class="shop-info-intro">
          <div class="shop-left">
            <span>{{ data.float_minmum_order_amount }}起送</span>
            |
            <span>配送费￥{{ data.float_delivery_fee }}</span>
          </div>
          <div class="shop-right">
            <span>{{(data.distance/1000).toFixed(2)}}km</span>
            |
            <span>{{data.order_lead_time}}分钟</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Roating from '@/components/Roating'

export default {
  name: 'ShopInfo',
  props: {
    data: Object
  },
  components: {
    Roating
  }
}
</script>

<style lang="less" scoped>
.shopinfo-container {
  .shop-info {
    display: flex;
    background-color: #fff;
    padding: 8px;
    .shop-info-left {
      width: 80px;
      height: 80px;
      padding: 5px;
      img {
        width: 100%;
      }
    }
    .shop-info-right {
      display: flex;
      flex: 1;
      padding: 5px 10px;
      flex-direction: column;
      justify-content: space-between;
      .shop-info-title {
        i {
          font-size: 12px;
          font-style: inherit;
          background-color: yellow;
          font-weight: 600;
          margin-right: 5px;
          padding: 0 5px;
        }
        span {
          font-size: 14px;
          font-weight: 600;
        }
      }
      .shop-info-star {
        display: flex;
        align-items: center;
        color: #333;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
          .shop-star {
            .fa-star {
              &:before {
                font-size: 12px;
                color: yellowgreen;
              }
            }
          }
          .rate {
            font-size: 12px;
            margin-left: 5px;
          }
          .shop-number {
            font-size: 5px;
            margin-left: 10px;
            white-space: nowrap;
          }
        }
        .send-bird {
          font-size: 12px;
          background-color: skyblue;
          margin-left: 20px;
          white-space: nowrap;
          padding: 5px;
        }
      }
      .shop-info-intro {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        span {
          margin: 0 3px;
        }
      }
    }
  }
}
</style>
